<template>
    <header class="mui-bar mui-bar-nav hxk-bar">
        <slot name="left"></slot>
        <h1 class="mui-title">{{titles}}</h1>
        <slot name="right"></slot>
    </header>
</template>
<script>
export default {
  data () {
    return {
        titles:"",
    }
  },
  props: {
    setTitle:{ type:[String] , default: "" },//标题
  },
  watch:{
        "title"(val, oldVal){
            if(val){
                this.titles=val;
            }else{
                this.titles=oldVal;
            }
            window.document.title = this.titles;
        },
        "setTitle"(val, oldVal){
            this.titles=val;
            window.document.title = this.titles;
        }
  },
  computed: {
        title () {
            return this.$route.meta.title;
        }
  },
  created(){
        if(this.setTitle){
            this.titles=this.setTitle;
        }else{
            this.titles=this.$route.meta.title;
        }
        window.document.title = this.titles;
  }
};
</script>
